<div class="toast-pf alert alert-{{type}}" [ngClass]="{'alert-dismissable': showCloseButton}"
     (mouseenter)="handleEnter($event)" (mouseleave)="handleLeave($event)">
  <div *ngIf="moreActions && moreActions.length > 0"
       class="pull-right dropdown-kebab-pf" dropdown>
    <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" dropdownToggle>
      <span class="fa fa-ellipsis-v"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight" *dropdownMenu>
      <li *ngFor="let action of moreActions" class="{{action.styleClass}}"
          [attr.role]="action.separator === true ? 'separator' : 'menuitem'"
          [ngClass]="{'divider': action.separator === true, 'disabled': action.disabled === true, 'hidden': action.visible === false}">
        <a *ngIf="action.disabled !== true && action.separator !== true"
           class="dropdown-item secondary-action"
           href="javascript:void(0)"
           title="{{action.tooltip}}"
           (click)="handleAction(action)">{{action.title}}</a>
        <a *ngIf="action.disabled === true && action.separator !== true"
           class="dropdown-item secondary-action"
           href="javascript:void(0)"
           title="{{action.tooltip}}"
           onclick="return false;">{{action.title}}</a>
      </li>
    </ul>
  </div>
  <button *ngIf="showCloseButton" type="button" class="close" aria-hidden="true" (click)="handleClose($event)">
    <span class="pficon pficon-close"></span>
  </button>
  <div *ngIf="primaryAction"
       class="pull-right toast-pf-action {{primaryAction.styleClass}}"
       [ngClass]="{'padding-right-15': showCloseButton == true, 'hidden': primaryAction.visible === false}">
    <div *ngIf="primaryAction.template; then showButtonTemplate else showButton"></div>
    <ng-template #showButtonTemplate let-action="action"
                 [ngTemplateOutlet]="primaryAction.template || null"
                 [ngTemplateOutletContext]="{ action: primaryAction }"></ng-template>
    <ng-template #showButton>
      <a *ngIf="primaryAction.disabled !== true"
         href="javascript:void(0)"
         title="{{primaryAction.tooltip}}"
         (click)="handleAction(primaryAction)">{{primaryAction.title}}</a>
      <a *ngIf="primaryAction.disabled === true"
         href="javascript:void(0)"
         title="{{primaryAction.tooltip}}"
         onclick="return false;">{{primaryAction.title}}</a>
    </ng-template>
  </div>
  <span class="pficon pficon-ok" *ngIf="type === 'success'"></span>
  <span class="pficon pficon-info" *ngIf="type === 'info'"></span>
  <span class="pficon pficon-error-circle-o" *ngIf="type === 'danger'"></span>
  <span class="pficon pficon-warning-triangle-o" *ngIf="type === 'warning'"></span>
  <span *ngIf="header">
    <strong>{{header}}</strong> {{message}}
  </span>
  <span *ngIf="!header">
    {{message}}
  </span>
</div>
